import { messages } from 'share/common';
import { InputNumber } from 'antd';
import React from 'react';

class invoiceNumberExpense extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      minExpenseReportSize: props.minExpenseReportSize,
      maxExpenseReportSize: props.maxExpenseReportSize,
      disabled: props.disabled
    };
  }

  onMinChange = (minExpenseReportSize) => {
    this.setState({ minExpenseReportSize });
    this.triggerChange({ minExpenseReportSize });
  };

  onMaxChange = (maxExpenseReportSize) => {
    this.setState({ maxExpenseReportSize });
    this.triggerChange({ maxExpenseReportSize });
  };

  triggerChange = (changedValue) => {
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
  };

  componentWillReceiveProps(nextProps) {
    const { minExpenseReportSize, maxExpenseReportSize, disabled } = nextProps;
    this.setState({ minExpenseReportSize, maxExpenseReportSize, disabled });
  }

  render() {
    const state = this.state;
    return (
      <span>
       <div className='num-min'>{messages('setting.key1825')/*最小*/}</div>
       <InputNumber
         disabled={state.disabled}
         onChange={this.onMinChange}
         value={state.minExpenseReportSize}
         min={1}
         step={1}
       />
      <div className='inline-box ant-form-item-label' style={{ width: '40px' }}>-</div>
      <div className='num-max'>{messages('setting.key1826')/*最大*/}</div>
        <InputNumber
          disabled={state.disabled}
          onChange={this.onMaxChange}
          value={state.maxExpenseReportSize}
          min={1}
          step={1}
        />
      </span>
    );
  }
}

export default invoiceNumberExpense;

